<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1.使用双大括号语法，显示到页面中 -->
        <h1>{{firstName+lastName}}</h1>
        <!-- 2.使用方法，把数据组合之后，显示到页面 -->
        <h1>{{getName()}}</h1>
        <h2>求和结果：{{getSum()}}</h2>
        <!-- 3.使用计算属性，把数据计算得到的结果，显示到页面 -->
        <h1>{{fullName}}</h1>
        <h2>求和结果：{{getSum2}}</h2>
        <!-- 4.使用监听属性，把计算结果显示到页面 -->
        <h1>{{allName}}</h1>


        <button v-on:click="getName()">点击1（调用方法）</button>
        <button v-on:click="test()">点击2(调用计算属性)</button>



    </div>
    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                firstName:"张",
                lastName:"三",
                allName:"张三",
                arr:[1,2,3,4,5,6,7,8,9]
            },
            // 方法
            methods:{
                getName(){
                    console.log("方法");
                    return this.firstName+this.lastName;
                },
                getSum(){
                    return this.arr.reduce(function(pre,next){
                        return pre+next;
                    })
                },
                test(){
                    console.log("test")
                    this.fullName;
                }
            },

            // 一、计算属性:会把回调函数作为实例化对象的属性存在，而不是方法存在，因此使用的时候不要加小括号
            // 要把该计算属性当做app对象的属性，它的取值就是计算得到的结果
            // 注意：计算属性一定要写return,返回值就是计算的结果
            // 计算属性主要用于比较复杂的计算
            computed:{
                fullName(){
                    console.log("计算属性");
                    return this.firstName+this.lastName;
                },
                getSum2(){
                    return this.arr.reduce(function(pre,next){
                        return pre+next;
                    })
                }
            },
            // 二、监听属性：主要用于监听数据变化（data）,只要数据有变化，就会自动触发该方法
            watch:{
                firstName(newValue,oldValue){
                    // newValue:形参，表示新的值
                    // oldValue:形参，表示旧的值
                    // console.log(newValue,oldValue);
                    this.allName=newValue+this.lastName;
                },
                lastName(newValue,oldValue){
                    // newValue:形参，表示新的值
                    // oldValue:形参，表示旧的值
                    // console.log(newValue,oldValue);
                    this.allName=this.firstName+newValue;

                }


            }
        })
        console.log(app);

        // methods方法和computed计算属性的区别：
        // 1.调用方式：methods方法调用的时候要带小括号；
        //            computed计算属性调用的时候不带小括号（因为实例化对象的时候会把计算属性作为vue实例对象的属性）
        // 2.多次调用计算属性的时候，代码只执行一次，因为它可以缓存；除非计算属性依赖的数据（data）发送改变，才会重新调用
        // 3.多次调用方法的时候，代码多次执行，没有缓存

        // 总结：methods方法和computed计算属性可以实现同一个效果时，优先使用computed计算属性，因为缓存

        // computed计算属性和watch监听属性的区别
        // 1.computed计算属性和watch监听属性都是监听数据的变化，只有数据发生变化的时候，才会被触发
        // 2.computed计算属性擅长多对一：computed计算属性监听多个数据的变化，重点是为了最后的计算结果
        // 3.watch监听属性擅长一对多：watch监听属性监听每一个数据的变化，重点是该一个数据的改变会影响到其他数据
        // 4.watch监听属性所监听的数据必须是提前在data中声明，computed计算属性的结果可以直接使用return返回

        // 总结：computed计算属性和watch监听属性可以实现同一个效果时，优先使用computed计算属性，因为代码更简单

        // methods方法和computed计算属性、watch监听属性的区别
        // 1.methods方法是通过事件驱动来执行函数的，是被动的
        // 2.computed计算属性、watch监听属性是监听数据发生变化时主动来执行该函数的，是主动的
    </script>
    
</body>
</html>